import React from "react";
import { Link, Outlet, useNavigate, useLocation } from 'react-router-dom'
import { Layout, Menu } from 'antd';
import { BulbTwoTone } from '@ant-design/icons';

const { SubMenu } = Menu;
const { Header, Content, Footer, Sider } = Layout;


const RouterPage = props => {
    const navigate = useNavigate()
    const location = useLocation()
    function nav(val) {
        console.log(location)
        navigate('/router', { replace: true })
    }
    return (
        <Layout style={{ padding: '24px 0', background: '#fff' }}>
            <Sider width={200} style={{ background: '#fff' }}>
                <Menu
                    mode="inline"
                    defaultSelectedKeys={['1']}
                    defaultOpenKeys={['sub1']}
                    style={{ height: '100%' }}
                >
                    <SubMenu
                        key="sub1"
                        title={
                            <span>
                                <BulbTwoTone />
                                路由
                            </span>
                        }
                    >
                        <Menu.Item key="1" onClick={nav}>元素</Menu.Item>
                        {/* <Menu.Item key="2"><Link to='shuxing'>属性</Link></Menu.Item> */}
                        <Menu.Item key="3"><Link to='method'>API</Link></Menu.Item>
                        {/* <Menu.Item key="4"><Link to='other'>其他</Link></Menu.Item> */}
                    </SubMenu>
                </Menu>
            </Sider>
            <Content style={{ padding: '0 24px', minHeight: 485 }}>
                <Outlet />
            </Content>
        </Layout>
    )

}
export default RouterPage